import React, { PureComponent } from 'react'
import { PageContainer } from '@ant-design/pro-layout';
import { Table, Card, Button, Form, Input, Pagination, Modal, Col, Row ,message, Select} from 'antd';
import StudentTypeCascader from '../Components/StudentTypeCascader/index';
import SubjectCascader from '../Components/SubjectCascader/index';
import { getPracticeAnalyze ,deletePracticeAnalyze} from '../../services/learn'
import Authorized from '../../components/Authorized/Authorized'
import {getPracticeDetail} from '../../services/learn'
import {baseurl} from '../../services/baseurl'
export default class Learn extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        const name = this.props.location.query.name;
        const stydent_type_data = JSON.parse(localStorage.getItem('userinfo')).student_type;
        const student_type = stydent_type_data?stydent_type_data.split(',').map(Number):[];
        this.state = {
            comprehensive: false,
            student_type,
            subject: [],
            data: [],
            currentPage: '1',
            count: 1,
            row: {},
            name: name || '',
            id_number: '',
            selectedRowKeys: [],
            detail:{},
            is_sw:'2',
        }
    }
    showComprehensive = (row: any) => () => {
        getPracticeDetail({uid:row.uid}).then(res=>{
            this.setState({
                detail:res
            })
        })
        this.setState({
            comprehensive: true,
            row
        })
    }
    hideComprehensive = () => {
        this.setState({
            comprehensive: false
        })
    }
    changeStudentType = (e: any) => {
        if(!e[0])return;
        this.setState({
            student_type: e
        })
    }
    changeSubject = (e: any) => {
        this.setState({
            subject: e
        })
    }
    renderList = (page: any,is_sw:any) => {
        const { subject, student_type, name, id_number } = this.state;
        getPracticeAnalyze({ page, subject, student_type, name, id_number ,is_sw}).then(res => {
            this.setState({
                data: res.data,
                count: res.count
            })
        })
    }
    componentDidMount() {
        this.renderList('1','2')
    }
    changeIsSw = (e: any) => {
        this.setState({
            is_sw:e,
            currentPage:1
        })
        this.renderList('1',e);
    }
    changePage = (e: any) => {
        const {is_sw} = this.state;
        this.setState({
            currentPage:e
        })
        this.renderList(e,is_sw);
    }
    changeValue = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    searchHandle = () => {
        const {is_sw} = this.state;
        this.renderList('1',is_sw);
        this.setState({
            currentPage:1
        })
    }
    deleteHandle=()=>{
        const {selectedRowKeys,is_sw} = this.state;
        Modal.confirm({
            title:'提示',
            content:'确定删除选中项？',
            onOk:()=>{
                deletePracticeAnalyze({id:selectedRowKeys,is_sw}).then(res=>{
                    if(res.status===1){
                        message.success('已删除')
                        this.setState({
                            selectedRowKeys:[]
                        })
                        this.renderList('1',is_sw)
                    }else{
                        message.error('删除失败')
                    }
                })
            }
        })
       
    }
    exportHandle=()=>{
        const { subject, student_type, name, id_number } = this.state;
        Modal.confirm({
            title: '提示',
            content: '确定导出用户？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
              window.open(`${baseurl}index/index/exercise_statistics_derive?subject=${subject[subject.length-1]||''}&student_type=${student_type[student_type.length-1]||''}&name=${name}&id_number=${id_number}`)
            }
          })
    }
    checkDetail=()=>{
        const {row,is_sw} = this.state;
        this.setState({
            id_number:row.id_number,
            comprehensive:false,
            currentPage:1
        },()=>{
            this.renderList('1',is_sw)
        })
    }
    render() {
        const { student_type, subject, data, count, row, comprehensive, name, selectedRowKeys,detail,id_number,currentPage} = this.state;
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name'
            },
            {
                title: '准考证号',
                dataIndex: 'id_number'
            },
            {
                title: '单位部门',
                dataIndex: 'student_types',
                render: (student_types: string) => {
                    return student_types && student_types.substr(0, student_types.length - 1)
                }
            },
            {
                title: '练习科目',
                dataIndex: 'subjects',
                render: (subjects: string) => {
                    return subjects && subjects.substr(0, subjects.length - 1).replace(/\\/g, '、')
                }
            },
            {
                title: '答题数',
                dataIndex: 'answer_num',
                render: (answer_num: any) => {
                    return answer_num || 0
                }
            },
            {
                title: '正确率',
                dataIndex: 'right_num',
                render: (right_num: any) => {
                    return right_num ? right_num + '%' : '0%'
                }
            },
            {
                title: '答题时长',
                dataIndex: 'time',
                render: (time: any) => {
                    return (Math.floor((Number(time||0)/1000/60) << 0))+'分钟'
                }
            },
            {
                title: '练习时间',
                dataIndex: 'presentation_time'
            },
            {
                title: '查看',
                dataIndex: 'id',
                render: (id: any, row: any) => {
                    return <a onClick={this.showComprehensive(row)}>综合成绩</a>
                }
            },
        ]
        const done_rate = ((row.answer_num ? row.answer_num : 0) / (row.question_num ? row.question_num : 0) * 100).toFixed(2)
        const subjects = row.subjects ? row.subjects.substr(0, row.subjects.length - 1) : '';
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys: any) => {
                this.setState({
                    selectedRowKeys,
                })
            },
        };
        return (
            <PageContainer>
                <Card>
                    <div style={{ overflow: 'hidden', marginBottom: 20 }}>
                        <Form style={{ float: 'right' }} layout="inline">
                            <Form.Item>
                                <Select onChange={this.changeIsSw} defaultValue="2">
                                    <Select.Option key="2" value="2">特种设备</Select.Option>
                                    <Select.Option key="1" value="1">特种作业</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item><StudentTypeCascader onChange={this.changeStudentType} value={student_type} /></Form.Item>
                            <Form.Item><SubjectCascader onChange={this.changeSubject} value={subject} /></Form.Item>
                            <Form.Item><Input placeholder="请输入搜索姓名" onChange={(e: any) => this.changeValue(e, 'name')} value={name} /></Form.Item>
                            <Form.Item><Input placeholder="请输入准考证号" onChange={(e: any) => this.changeValue(e, 'id_number')} value={id_number} /></Form.Item>
                            <Form.Item><Button type="primary" onClick={this.searchHandle}>搜索</Button></Form.Item>
                            <Form.Item><Button type="primary" danger onClick={this.exportHandle}>导出</Button></Form.Item>
                            
                        </Form>
                    </div>
                    <Table 
                        scroll={{x:1400}}
                        footer={() => <Authorized authority={[601]}><Button type="primary" danger  onClick={this.deleteHandle}>删除选中</Button></Authorized>}
                        rowSelection={rowSelection} columns={columns}
                        pagination={false} dataSource={data} rowKey="id"></Table>
                    <Pagination style={{ float: 'right', marginTop: 20 }} onChange={this.changePage} current={currentPage*1} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                </Card>
                <Modal title="综合成绩" visible={comprehensive} onCancel={this.hideComprehensive} footer={[<Button key="1" type="primary" onClick={this.hideComprehensive}>确定</Button>]}>
                    <Row>
                        <Col span={6}><h4>练习科目</h4></Col>
                        <Col span={18}><h4>{subjects}</h4></Col>
                        <Col span={6}><h4>练习总数</h4></Col>
                        <Col span={18}><h4>{detail.all}道</h4></Col>
                        <Col span={6}><h4>实际作答</h4></Col>
                        <Col span={18}><h4>{detail.done_num}道</h4></Col>
                        <Col span={6}><h4>完成率</h4></Col>
                        <Col span={18}><h4>{detail.percentage}%</h4></Col>
                        <Col span={6}><h4>正确率</h4></Col>
                        <Col span={18}><h4>{detail.rights}%</h4></Col>
                    </Row>
                    <Button type="primary" onClick={this.checkDetail}>练习明细</Button>
                </Modal>
            </PageContainer>
        )
    }
}
